<template>
	<div class="banner">
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handlerClose" :close-on-click-modal="false">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="标题" :label-width="formLabelWidth" prop="title"><el-input v-model="form.title" placeholder="标题"></el-input></el-form-item>
				<el-form-item label="跳转目标" :label-width="formLabelWidth" prop="target">
					<el-input type="target" v-model="form.target" placeholder="跳转目标"></el-input>
					<p class="tip">请输入正确的链接 以http或者https或者 ftp开头</p>
				</el-form-item>
				<el-form-item label="链接类型" :label-width="formLabelWidth" prop="type">
					<el-select v-model="form.type" placeholder="请选择链接类型">
						<el-option v-for="item in dynamicTags" :key="item.id" :label="item.typename" :value="item.typename"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitUpload">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'banner-page',
	data() {
		return {
			dialogFormVisible: true,
			form: {},
			title: '新增链接',
			formLabelWidth: '80px',
			url: {
				update: '/link/update',
				add: '/link/add',
				type: '/link/type'
			},
			rules: {
				title: [{ required: true, message: '请输入链接标题', trigger: 'blur' }],
				target: [
					{ required: true, message: '请输入链接', trigger: 'blur' },
					{
						pattern:/^(ftp|http|https):\/\/.+$/,
						message: '请输入正确的链接',
						trigger: 'blur'
					}
				],
				type: [{ required: true, message: '请选择链接类型', trigger: 'blur' }]
			},
			dynamicTags: []
		};
	},
	created() {
		this.getTypeList();
	},
	methods: {
		//获取文章类型
		getTypeList() {
			this.$http.get(this.url.type).then(res => {
				console.log(res);
				if (res.status == 200) {
					this.dynamicTags = res.data.results;
				}
			});
		},
		open(row) {
			if (row) {
				this.title = '修改链接';
				this.form = Object.assign({}, row);
			}
			this.dialogFormVisible = true;
		},
		//确定提交
		submitUpload() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					let key = this.form.id ? 'update' : 'add';
					let message = this.form.id ? '修改成功' : '新增成功';
					this.$http.post(this.url[key], this.form).then(res => {
						if (res.status === 200) {
							this.$message({
								message,
								type: 'success'
							});
							this.submit = true;
							this.dialogFormVisible = false;
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		httpRequest(params) {
			// 上传新文件时，将进度条值置为零
			const file = params.file;
			this.forms = new FormData(); // 实例化一个formData，用来做文件上传
			this.forms.append('file', file);
			this.forms.append('article_title', this.form.article_title);
			this.forms.append('article_content', this.form.article_content);
			this.forms.append('typename', this.form.typename);
			console.log('params', params);
			let url = this.form.id ? this.url.edit + '/' + this.form.id : this.url.add;
			this.$http.post(url, this.forms).then(res => {
				if (res.status === 200) {
					this.$message({
						message: this.title + '成功',
						type: 'success'
					});
					this.submit = true;
					this.dialogFormVisible = false;
				}
			});
		},
		//控制图片上传数量
		handleExceed() {
			this.$message({
				showClose: true,
				message: '每次只允许上传一张图片',
				type: 'warning'
			});
		},
		//监听弹出框关闭
		handlerClose() {
			this.$emit('close', this.submit);
		},
		//移除图片
		handleRemove(file, fileList) {
			this.haveImg = false;
			console.log(11, file, fileList);
		},
		//添加图片
		handlerChange(file, fileList) {
			this.haveImg = true;
			console.log(22, file, fileList);
		}
	}
};
</script>

<style scoped lang="less">
	.tip{
		font-size: 12px;
		color: #ccc;
	}
</style>
